<template>
	<view class="page">
		<view class="header-section">
			<view class="header-content">
				<view class="title">创意设计</view>
				<view class="subtitle">让图片更有创意和个性</view>
			</view>
		</view>
		
		<view class="tools-section">
			<view class="tools-grid">
				<!-- 加个水印 -->
				<view class="grid-item featured" @click="toWaterMark">
					<image src="../../static/images/home/waterMark.svg" class="grid-icon"></image>
					<text class="grid-title">加个水印</text>
					<text class="grid-desc">为图片添加个性水印</text>
					<view class="featured-badge">热门</view>
				</view>
				
				<!-- 添加滤镜 -->
				<view class="grid-item" @click="toFilers">
					<image src="../../static/images/home/filters.svg" class="grid-icon"></image>
					<text class="grid-title">添加滤镜</text>
					<text class="grid-desc">美化图片效果</text>
				</view>
				
				<!-- 头像加字 -->
				<view class="grid-item" @click="createPoster">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">头像加字</text>
					<text class="grid-desc">头像文字装饰</text>
				</view>
				
				<!-- 相框边框 -->
				<view class="grid-item" @click="toFrameDecoration">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">相框边框</text>
					<text class="grid-desc">添加装饰边框</text>
				</view>
				
				<!-- 九宫格裁剪 -->
				<view class="grid-item" @click="toGridCrop">
					<image src="../../static/images/home/clip.svg" class="grid-icon"></image>
					<text class="grid-title">九宫格裁剪</text>
					<text class="grid-desc">分割为九宫格</text>
				</view>
				
				<!-- 长图拼接 -->
				<view class="grid-item" @click="toLongImageStitch">
					<image src="../../static/images/home/clip.svg" class="grid-icon"></image>
					<text class="grid-title">长图拼接</text>
					<text class="grid-desc">多图拼成长图</text>
				</view>
				
				<!-- 智能拼图 -->
				<view class="grid-item" @click="toPhotoCollage">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">智能拼图</text>
					<text class="grid-desc">多图智能拼图</text>
				</view>
				
				<!-- 马赛克涂鸦 -->
				<view class="grid-item" @click="toMosaicTool">
					<image src="../../static/images/home/filters.svg" class="grid-icon"></image>
					<text class="grid-title">马赛克涂鸦</text>
					<text class="grid-desc">马赛克和涂鸦</text>
				</view>
				
				<!-- 表情包制作 -->
				<view class="grid-item" @click="toMemeMaker">
					<image src="../../static/images/home/subtitle.svg" class="grid-icon"></image>
					<text class="grid-title">表情包制作</text>
					<text class="grid-desc">制作搞笑表情包</text>
				</view>
				
				<!-- 证件照换背景 -->
				<view class="grid-item" @click="toIdPhotoMaker">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">证件照换背景</text>
					<text class="grid-desc">制作标准证件照</text>
				</view>
				
				<!-- GIF制作 -->
				<view class="grid-item" @click="toGifMaker">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">GIF制作</text>
					<text class="grid-desc">多图合成动图</text>
				</view>
				
				<!-- 批量水印 -->
				<view class="grid-item" @click="toBatchWatermark">
					<image src="../../static/images/home/waterMark.svg" class="grid-icon"></image>
					<text class="grid-title">批量水印</text>
					<text class="grid-desc">批量添加水印</text>
				</view>
				
				<!-- 宠物边框 -->
				<view class="grid-item" @click="toPetPhotoFrame">
					<image src="../../static/images/home/poster.svg" class="grid-icon"></image>
					<text class="grid-title">宠物边框</text>
					<text class="grid-desc">萌宠照片装饰</text>
				</view>
				
				<!-- 复古胶片 -->
				<view class="grid-item" @click="toVintageFilm">
					<image src="../../static/images/home/filters.svg" class="grid-icon"></image>
					<text class="grid-title">复古胶片</text>
					<text class="grid-desc">胶片质感效果</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 加个水印
			toWaterMark() {
				this.selectImage('waterMark')
			},
			
			// 添加滤镜
			toFilers() {
				this.selectImage('filters')
			},
			
			// 头像加字
			createPoster() {
				this.selectImage('headPhoto')
			},
			
			// 相框边框
			toFrameDecoration() {
				this.selectImage('frameDecoration')
			},
			
			// 九宫格裁剪
			toGridCrop() {
				this.selectImage('gridCrop')
			},
			
			// 长图拼接
			toLongImageStitch() {
				uni.navigateTo({
					url: '/subPackages/imageTools/longImageStitch/longImageStitch'
				})
			},
			
			// 智能拼图
			toPhotoCollage() {
				uni.navigateTo({
					url: '/subPackages/imageTools/photoCollage/photoCollage'
				})
			},
			
			// 马赛克涂鸦
			toMosaicTool() {
				this.selectImage('mosaicTool')
			},
			
			// 表情包制作
			toMemeMaker() {
				this.selectImage('memeMaker')
			},
			
			// 证件照换背景
			toIdPhotoMaker() {
				this.selectImage('idPhotoMaker')
			},
			
			// GIF制作
			toGifMaker() {
				uni.navigateTo({
					url: '/subPackages/imageTools/gifMaker/gifMaker'
				})
			},
			
			// 批量水印
			toBatchWatermark() {
				uni.navigateTo({
					url: '/subPackages/imageTools/batchWatermark/batchWatermark'
				})
			},
			
			// 宠物边框
			toPetPhotoFrame() {
				this.selectImage('petPhotoFrame')
			},
			
			// 复古胶片
			toVintageFilm() {
				this.selectImage('vintageFilm')
			},
			
			// 选择图片并跳转到对应功能
			selectImage(toolName) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFiles[0].tempFilePath
						uni.navigateTo({
							url: `/subPackages/imageTools/${toolName}/${toolName}?imageUrl=${encodeURIComponent(tempFilePath)}`
						})
					},
					fail: (err) => {
						console.log('选择图片失败:', err)
						uni.showToast({
							title: '请先选择图片',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.header-section {
	padding: 80rpx 40rpx 60rpx;
	text-align: center;
	color: white;
	
	.title {
		font-size: 56rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		opacity: 0.8;
	}
}

.tools-section {
	padding: 0 30rpx;
	
	.tools-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 25rpx;
		
		.grid-item {
			background: white;
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			text-align: center;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
			position: relative;
			
			&:active {
				transform: translateY(5rpx);
				box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.2);
			}
			
			&.featured {
				background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
				color: white;
				
				.grid-title, .grid-desc {
					color: white;
				}
			}
			
			.grid-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
			
			.grid-title {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.grid-desc {
				display: block;
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
			}
			
			.featured-badge {
				position: absolute;
				top: 15rpx;
				right: 15rpx;
				background: #ff6b6b;
				color: white;
				font-size: 20rpx;
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
			}
		}
	}
}
</style>